<template>
  <div>
    <el-card class="box-card">
        <div>
      <span style="margin:0 20px 0 0">选择项目：</span>
      <el-cascader
        v-model="value"
        :options="optionsProject"
        clearable
        :props="props"
        collapse-tags
        placeholder="请选择"
        filterable
        @change="filterDataFn($event,'项目')"
      >
      </el-cascader>
      <label for="select" style="margin:0 20px 0 6%">主技术/产品中心：</label>
      <el-select
        v-model="Produnction"
        multiple
        @change="filterDataFn($event,'主技术')"
        placeholder="请选择"
        collapse-tags
        clearable
        filterable
        style="margin-top: -70px;margin-right: 34%;">
            <el-option
                v-for="item in ProdunctionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
            >
           </el-option>
      </el-select>
      <label for="select" style="margin:0 20px 0 -27%">技术领域：</label>
      <el-cascader
       
        placeholder="请选择"
        :options="tecAreaOptions"
        :props="props"
        @change="filterDataFn($event,'技术领域')"
        collapse-tags
        clearable
        filterable
        ref="tree"></el-cascader>
        </div>
        <div style="margin-top:10px">
            <span style="margin:0 20px 0 0">需求状态：</span>
        <el-select v-model="needStatus" multiple placeholder="请选择" filterable clearable @change="filterDataFn($event,'需求状态')" >
        <el-option
            v-for="item in needStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
        </el-select>
        <span style="margin:0 20px 0 6%">项目状态：</span>
        <el-select  v-model="projectStatus" multiple placeholder="请选择" filterable clearable @change="filterDataFn($event,'项目状态')" >
        <el-option
            v-for="item in projectStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
        </el-select>
        <span style="margin:0 20px 0 10%">项目经理：</span>
        <el-select v-model="pm" multiple placeholder="请选择" filterable clearable @change="filterDataFn($event,'项目经理')" >
        <el-option
            v-for="item in pmList"
            :key="item.value + item.label"
            :label="item.label"
            :value="item.value">
        </el-option>
        </el-select>
        
        </div>
        <div style="margin-top:10px">
            <span class="col-span" style="margin:0 20px 0 0">客户经理：</span>
        <el-select v-model="am" multiple placeholder="请选择" filterable clearable @change="filterDataFn($event,'客户经理')" >
        <el-option
            v-for="item in amList"
            :key="item.value + item.label"
            :label="item.label"
            :value="item.value">
        </el-option>
        </el-select>
        <label for="select" style="margin:0 20px 0 6%">时间段：</label>
        <el-date-picker
           
            v-model="dateRange"
            @change="changeDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        </div>
        <el-button type="primary" plain round style="float: right; margin: 10px 0 10px 0;" @click="down()">导出</el-button>
      <el-table
        :data="tableData"
        border
        max-height="650"
        class="tableClass"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :header-cell-style="{ background: '#eef1f6', height: '80px' }"
        style="margin-top: 10px"
      >
        <el-table-column label="项目名称" prop="project_name" width="130" align="center" fixed="left"></el-table-column>
        <el-table-column label="立项事业部" prop="project_dept_name" width="100" align="center"></el-table-column>
        <el-table-column label="主技术/产品中心" prop="core" width="130" align="center"></el-table-column>
        <el-table-column label="项目经理" prop="pm_zh" width="100" align="center"></el-table-column>
        <el-table-column label="客户经理" prop="am_zh" width="100" align="center"></el-table-column>
        <el-table-column label="项目状态" prop="project_status" width="100" align="center"></el-table-column>
        <el-table-column label="实施部门" prop="site_power_dept_name" width="100" align="center"></el-table-column>
        <el-table-column label="技术领域" prop="technical_field_name" width="150" align="center"></el-table-column>
        <el-table-column label="需求状态" prop="site_power_status" width="100" align="center">
            <template slot-scope="scope">
                <div v-if='scope.row.site_power_status'>
                    {{"已确定"}}
                </div>
                <div v-else>
                    {{"未确定"}}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="资源分类" min-width="150" align="center" >
            <div class="borders" >{{ "需求" }}</div>
            <div class="borders1">{{ "供给" }}</div>
            <div class="borders2">{{ "GAP"  }}</div>
        </el-table-column>
        <el-table-column v-for="(d, index) in daysCol" :key="index" :label="d + '周'" width="150" align="center" type="cell">
          <template slot-scope="scope">
            <div v-if="scope.row.value[d]">
              <div class="borders" >{{ scope.row.value[d].need | rounding }}</div>
              <div class="borders1" >{{ scope.row.value[d].get | rounding}}</div>
              <div class="borders2" >{{ scope.row.value[d].gap  | rounding}}</div>
            </div>
              
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="marT"
        background
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="baseSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 10px; margin-left: 34%"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getHeaderName } from '@/app.config';
import { DateUtil } from './utils.js';
export default {
  data() {
    return {
      am:'',
      amList:[],
      pmList:[],
      pm:'',
      projectStatus:'',
      projectStatusList:[
          {'label':'变更','value':0},
          {'label':'封存','value':1},
          {'label':'结项','value':2},
          {'label':'立项','value':3},
          {'label':'终止','value':4},
          {'label':'研发结项','value':5},
          {'label':'预立项','value':6},
          {'label':'潜在项目','value':7},],
      dateRange:'',
      value2:"",
      needStatusList:[
          {
          value: '已确定',
          label: '已确定'
          }, {
          value: '未确定',
          label: '未确定'
          }, 
      ],
      needStatus:'',  
      tecAreaOptions:[],
      ProdunctionOptions:[],
      Produnction:'',
      tableData: [],
      loading: false,
      currentPage: 1,
      daysCol: [],
      params2: {},
      value2: '',
      value: '',
      optionsProject: [],
      props: { multiple: true },
      baseSize: 10,
      current: 1,
      total: 0,
    };
  },
  filters: {
    rounding (value) {
      if(value || value === 0) { //这个判断是为了防止数据为空，页面渲染为NAN
        return Number(value).toFixed(1)
      }
    }
  },
  mounted() {
    this.defaultWeekTime()
    this.getTableData()
    this.getProjectList()
    this.getProdunctionOptionsFn()
    this.getTecAreaOptionsFn()
    this.getPmListFn()
    this.getAmListFn()
  },
  methods: {
      down(){
        this.loading = true
        this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/kanban_to_excel',
        method: "get",
        headers: getHeaderName(),
        responseType: 'blob',
        }).then(res => {
        if(res.status === 200) {
            this.loading = false
            const blob = new Blob([res.data]);
            const fileName = '资源需求报表.xlsx';
            // for IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
            // for Non-IE (chrome, firefox etc.)
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
            this.loading = false
            this.$message({
            type:"success",
            message:"导出成功!"
            })
        }} else {
            this.loading = false
            this.$message.error('下载出错了!'); 
            }
            }).catch(err => {
                this.$message.error('下载出错了!'); 
                this.loading = false
            })
    },
    getAmListFn(){
          this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/kanban_select_data?name=am',
            method: "get",
            headers: getHeaderName(),
          }).then(res=>{
                this.amList = res.data.data
            })
      },
      getPmListFn(){
          this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/kanban_select_data?name=pm',
            method: "get",
            headers: getHeaderName(),
          }).then(res=>{
                this.pmList = res.data.data
            })
      },
      getTecAreaOptionsFn(){
          this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree?filter=1',
            method: "get",
            headers: getHeaderName(),
            }).then(res=>{
                this.tecAreaOptions = res.data.data
                this.tecAreaOptions.splice(0,1)
            })
      },
      getProdunctionOptionsFn(){
          this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_core',
            method: "get",
            headers: getHeaderName(),
            }).then(res=>{
                this.ProdunctionOptions = res.data.data
            })
      },
      getProjectList(){
          this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/demand_tree',
            method: "get",
            headers: getHeaderName(),
            }).then(res=>{
                this.optionsProject = res.data.data
            })
      },
      defaultWeekTime() {
        let startD = new Date()
        let endD = new Date()
        endD.setMonth(endD.getMonth() + 1)
        let beginDate = startD.getFullYear()+'-'+(startD.getMonth()+1)+'-'+startD.getDate()
        let endDate = endD.getFullYear()+'-'+(endD.getMonth()+1)+'-'+endD.getDate()
        this.dateRange = [beginDate,endDate]
        this.daysCol = DateUtil.estLabourWeek(beginDate,endDate)
        },
    changeDateRange(e){
        let list = []
        if(e) {
            list = DateUtil.estLabourWeek(e[0],e[1])
        }
        this.current=1
        this.daysCol = list
        this.getTableData()
    },
    filterDataFn(e,type){
      console.log(e)
        if(type=="项目"){
            let projectList = []
            e.map(v=>{
                projectList.push(v[1])
            })
            this.params2['project_ids'] = Array.from(new Set(projectList))
        }
        if(type=="主技术"){
             this.params2['cores'] = e
        }
        if(type=="技术领域"){
            let tecList = []
            e.map(val=>{
                tecList.push(val[val.length-1])
            })
            this.params2['technical_field_ids'] = tecList
        }
        if(type=="需求状态"){
            this.params2['site_power_status'] = e
        }
        if(type=="项目状态"){
            this.params2['project_status'] = e
        }
        if(type=="项目经理"){
            this.params2['pm'] = e
        }
        if(type=="客户经理"){
            this.params2['am'] = e
        }
        this.current=1
        this.getTableData()
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getTableData();
    },
    getTableData() {
      this.loading = true;
      this.params2['page'] = this.current;
      this.params2['week_range'] = this.daysCol.toString();
      this.$axios({
        url:process.env.VUE_APP_SOURSE_MANAGE_HOST +'/api/v1/car_project/kanban',
        method: 'post',
        headers: getHeaderName(),
        data: this.params2,
      }).then((res) => {
        if (res.data.code === 200) {
          this.loading = false;
          this.tableData = res.data.data.data;
          this.total = res.data.data.totalCount;
          this.baseSize = res.data.data.pageSize
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-table__body-wrapper {
  z-index: 2;
}

.borders{
    border-bottom: 1px solid #c5c4c1;
    height: 25px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
  .borders1{
    border-bottom: 1px solid #c5c4c1;
    height: 32px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
  .borders2{
    // border-bottom: 1px solid #c5c4c1;
    height: 25px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
/deep/.el-table tr {
    // background-color: #fff;
    height: 50px;}
</style>


